<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dom操作-单节点</title>
</head>
<body>
<!--<div id="box" class="box" name="box">-->

<ul id="nav">

</ul>

<input id="username"/>

<a id="link"></a>

</div>
</body>
<script>

    /*document.write*/

    /**
     * 基本选择器
     *  1. id选择器
     *  2. 类选择器
     *  3. 元素选择器
     *  4. name选择器
    * */
  var box=  document.getElementById('box'); // id选择器
  /*// var box=   document.getElementsByClassName('box')[0];
 // var box=  document.getElementsByTagName("div")[0];
   var box= document.getElementsByName("box")[0];*/


   /*
   * * 修改元素
   *   1. innerText & innerHTML
   *
   * */
    // box.innerText = "<h1>hello</h1>";
   //box.innerHTML = "<h1>hello</h1>"   //把对应html渲染到页面上

   // box.innerHTML = "<div>1</div><div>2</div>";

    /**
     *  练习1：
     *     左侧导航
     *     table
    * */


      var menus = [
        {
            id:1,
            title:'模块1',
            url:'http://test.org/item1'
        }, {
            id:2,
            title:'模块2',
            url:'http://test.org/item2'
        }, {
            id:2,
            title:'模块2',
            url:'http://test.org/item3'
        }
    ]

   var nav =  document.getElementById('nav');
   var html="";

   for (var key in menus){

       html+="<li> <a href='"+menus[key].url+"'>"+menus[key].title+"</a></li>"
   }
    nav.innerHTML= html;

   /**
    *  input 赋值
    * **/

   /*
    * 1. 选择器找到dom节点
    * 2. 修改--input value
   * **/

 var username=  document.getElementById('username');
 username.value = "admin";
/*
 * a 赋值
* */

var anchor=document.getElementById('link');
anchor.href = "#";
anchor.innerText="主页";

/**
 *   img
 *   textaread  row
 *   table border
* */





</script>
</html>